<template>
  <el-form
    :model="formDate"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="账号" prop="account">
      <el-input v-model="formDate.account" placeholder="请输入账号"></el-input>
    </el-form-item>

    <el-form-item v-if="type==='add'" label="密码" prop="password">
      <el-input v-model="formDate.password" placeholder="请输入密码"></el-input>
    </el-form-item>

    <el-form-item label="用户组" prop="userGroup">
      <el-select v-model="formDate.userGroup" placeholder="请选择用户组">
        <el-option label="超级管理员" value="超级管理员"></el-option>
        <el-option label="普通管理员" value="普通管理员"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="add"
        >{{ type === "add" ? "添加" : "编辑" }}账号</el-button
      >
      <el-button type="primary" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
// import { usersListReq} from "@/api/account.api"
export default {
  props: {
    type: {
      type: String,
      default: "add",
    },
    defaultForm: {
      type: Object,
      default: () => ({}),
    },
  },
  
  data() {
    return {
      cateList: [],
      formDate: {
        account: "",
        password: "",
        userGroup: "",
      },
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        userGroup: [{ required: true, message: "用户组", trigger: "blur" }],
      },
    };
  },
  methods: {
    add() {
      // 验证
      this.$refs.ruleForm.validate(async (res) => {
        if (res) {
          // console.log('发送axios');
          //   const res = await usersAddReq(this.formDate);
          //  console.log(res);

          //   if (res.data.code === 0) {
          //     this.$message.success("添加账号成功");
          //     this.$router.push("/account/list");
          //   }

          this.$emit("success", this.formDate);
        } else {
        }
      });
    },
    reset() {
      this.$refs.ruleForm.resetFields();
    },
  },
 async created(){
   
  },
  watch: {
    defaultForm: {
      handler: function() {
        if(this.type === "edit"){
          this.formDate ={...this.defaultForm}
        }
      },
      // deep: true,
      immediate: true
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.el-input__inner {
  width: 300px;
}
</style>